<template>
  <div class="wrapper">
    <main>
      <div class="title">消费金额</div>
      <div class="input">
        <span>￥</span>
        <input class="ipt" type="digit" @input="mobileInput" />
      </div>
      <div class="store">
        <u-checkbox-group @change="checkboxGroupChange">
          <u-checkbox
            @change="checkboxChange"
            v-model="item.checked"
            v-for="(item, index) in list"
            :key="index"
            :name="item.name"
          >
            {{ item.name }}
          </u-checkbox>
        </u-checkbox-group>
        <div class="other" @click="search">{{ storeName }}</div>
      </div>

      <button class="btn" @click="pay">立即买单</button>
    </main>

    <Coupon :coupon="coupon" v-if="coupon.length > 0"></Coupon>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getCodeHasMember } from '@/api'
import Coupon from '@/components/coupon'

export default {
  components: {
    Coupon
  },
  data() {
    return {
      money: 0,
      list: [
        {
          name: 'TOTO',
          checked: false,
          disabled: false
        },
        {
          name: '科勒',
          checked: false,
          disabled: false
        }
      ],
      coupon: [],
      check: 0,
      value: '',
      storeId: '',
      storeName: '其它商家'
    }
  },
  methods: {
    search() {
      uni.navigateTo({
        url: '/components/search/index'
      })
      this.list[0].checked = false
      this.list[1].checked = false
      this.check = 0
    },
    checkboxGroupChange(e) {
      this.storeName = '其它商家'
      this.storeId = ''
      if (e.length === 1) {
        this.check = 1
      } else if (e.length === 2) {
        this.check = 1
        const index = this.list.findIndex(item => item.name === this.value)
        if (index === 1) {
          this.list[0].checked = false
        } else {
          this.list[1].checked = false
        }
      } else {
        this.check = 0
      }
    },
    checkboxChange(e) {
      this.value = e.name
    },
    pay() {
      if (this.check === 0 && !this.storeId) {
        uni.showToast({
          title: '请选择商户!',
          icon: 'none'
        })
        return
      }
      if (this.money === 0) {
        uni.showToast({
          title: '请输入金额!',
          icon: 'none'
        })
        return
      }
      getCodeHasMember(
        this.userInfo.id,
        this.money,
        this.check,
        this.storeId
      ).then(res => {
        this.coupon = res.data
      })
    },
    mobileInput(e) {
      var price = e.detail.value
      price = price.replace(/[^\d.]/g, '') //清除“数字”和“.”以外的字符
      price = price.replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      price = price
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      price = price.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') //只能输入两个小数
      if (price.indexOf('.') < 0 && price != '') {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        price = parseFloat(price)
      }
      this.money = price
      return {
        value: price
      }
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  background: #faf7fa;
  min-height: 100vh;
  main {
    padding: 20rpx;
    .title {
      margin: 20rpx;
    }
    .input {
      background: #fff;
      border-radius: 20rpx;
      margin: 20rpx 0;
      padding-left: 10rpx;
      span {
        position: absolute;
        line-height: 70rpx;
      }
      .ipt {
        padding-left: 40rpx;
        height: 70rpx;
      }
    }
    .store {
      display: flex;
      align-items: center;
      .other {
        right: 40rpx;
        position: absolute;
        width: 240rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: rgba(199, 196, 196, 0.493);
        padding: 20rpx;
        border-radius: 30rpx;
        text-align: center;
      }
    }

    .btn {
      background: #da2b2d;
      border-radius: 30rpx;
      width: 200rpx;
      margin: 40rpx auto;
    }
  }
}
</style>
